<style>
    .table-bordered, .table-bordered > tbody > tr > td, .table-bordered > thead > tr > th {
        border-color: #FFFFFF !important;
    }

    .table > tbody > tr > td, .table > tfoot > tr > td {
        padding: 2px 2px;
    }
    .alert-danger p{
        margin: 0;
    }
</style>
<!-- angular通过ng-modal添加模态框时，不需要外层的div，只需从modal-content开始即可 -->
<div class="">
    <div class="modal-header">
        <h3 class="modal-title">添加用户故事</h3>
        <div ng-show="info.showAlert" class="alert-success" role="alert">
            <p>用户故事的描述技巧：</p>
            <p>用户故事是对需求描述的一种话术, 格式为"某个角色或某个人 希望在什么地方实现什么要求, 以便于达到xxxx的效果/以避免xxx的问题."</p>
            <p>让我们举个例子: "客服希望tom的邮件通知功能可以查询和重发3个月内的发送记录, 以便处理未送达邮件的投诉时快速找到发送失败的邮件, 并重新发送,提高SLA."</p>
            <p>以下是不好的例子, 请参考并加以改进：</p>
            <p>1. "昨天出现了xxxx, 后来xxxx, 最后xxxx, 很不好,希望改善". —> 这样只能算是背景描述, 不能作为用户故事的主体.</p>
            <p>2. "把xxxx软件改成xxxxx的效果." —> 应当补充谁想要这样作, 为了什么(好处).</p>
        </div>
    </div>
    <form class="modal-body form-horizontal">
        <div class="form-group">
            <label class="col-sm-1 control-label">用户故事
                <i class="fa fa-question-circle" style="cursor: pointer;" ng-click="showAlertMessage()"></i>：</label>
            <div class="col-sm-11">
                <table class="table table-bordered table-hover table-condensed" style="margin-bottom: 0px;">
                    <thead>
                    <tr>
                        <th style="width: 10%;">编号</th>
                        <th colspan="2" style="width: 65%;">故事描述</th>
                        <th style="width: 15%;">交付给</th>
                        <th style="width: 5%;">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-show="info.dataList.length == 0">
                        <td colspan="10">暂无数据！</td>
                    </tr>
                    <tr ng-repeat="data in info.dataList" data-id="{{$index + 1}}" ng-show="info.dataList.length > 0">
                        <td>
                            <span>{{data.number}}</span>
                        </td>
                        <td data-status="select" style="width: 10%;">
                            <m-ui-select prompt="请选择用户"
                                         callback-data="data"
                                         itme-list="info.issueUser"
                                         selected-item="data.sltUser"
                                         select-item-fun="selectUserItem(item)">
                            </m-ui-select>
                        </td>
                        <td data-status="input">
                            <input type="text" class="form-control" placeholder="故事话术：需要实现xxxx样的功能/效果，以便于获得/降低/得到/节省XXXX样的好处/时间/盈利机会." ng-model="data.action"
                                   ng-blur="blurAction(data)">
                        </td>
                        <td data-status="select">
                            <m-single-select-user prompt="指派对象"
                                                  callback-data="data"
                                                  selected-user="data.sltToAccount"
                                                  select-user-fun="selectToAccount(user)">
                            </m-single-select-user>
                        </td>
                        <td class="actions" style="padding-top: 12px;">
                            <i mwl-confirm
                               class="fa fa-remove"
                               data-index="{{$index + 1}}"
                               style="cursor: pointer;"
                               tabindex="0"
                               message="确定要删除此数据吗？"
                               confirm-text="确定 <i class='fa fa-check'></i>"
                               cancel-text="取消 <i class='fa fa-remove'></i>"
                               placement="bottom"
                               on-confirm="clickDeleteBtn(data)"
                               on-cancel=""
                               confirm-button-type="danger"
                               cancel-button-type="default">
                            </i>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="line-lg pull-in" style="margin-top: 8px;margin-bottom: 8px;"></div>
        <div class="form-group">
            <div class="col-sm-1"></div>
            <div class="col-sm-11">
                <i class="fa fa-plus-square-o"
                   style="padding-right: 5px;cursor: pointer; font-size: 25px;"
                   popover="追加新需求"
                   popover-trigger="mouseenter"
                   ng-click="clickAddTr()">
                </i>
            </div>
        </div>
        <div class="line-lg pull-in" style="margin-top: 8px;margin-bottom: 8px;"></div>
        <div class="form-group">
            <!--<label class="col-sm-1 control-label">提出时间：</label>-->
            <!--<div class="col-sm-1">-->
                <!--<label class="control-label">{{info.time | date:'yyyy-MM-dd'}}</label>-->
            <!--</div>-->
            <label class="col-sm-1 control-label">分组标题：</label>
            <div class="col-sm-2 form-type-selec">
              <input type="text" class="form-control" placeholder="请输入分组标题" ng-model="info.groupTag">
            </div>   
            <label class="col-sm-1 control-label">业务线：</label>
            <div class="col-sm-2 form-type-selec">
                <m-ui-select prompt="请选择业务线"
                                itme-list="info.issueList"
                                selected-item="info.issueItem">
                </m-ui-select>
            </div>
            <label class="col-sm-1 control-label">提出人：</label>
            <div class="col-sm-2 col-ui-select">
                <m-single-select-user prompt="请选择提出人"
                                        selected-user="info.proposeUser"
                                        select-user-fun="selectProposeUser(user)">
                </m-single-select-user>
            </div>
            <label class="col-sm-1 control-label">全部交付给：</label>
            <div class="col-sm-2 col-assign-select">
                <m-single-select-user prompt="请选择全部交付对象"
                                      selected-user="info.assignUser"
                                      select-user-fun="selectAssignUser(user)">
                </m-single-select-user>
            </div>
            <!--<label class="col-sm-1 control-label">关联BRD：</label>-->
            <!--<div class="col-sm-3">-->
                <!--<m-ui-select prompt="请选择BRD"-->
                                <!--itme-list="info.brdList"-->
                                <!--selected-item="info.brdItem">-->
                <!--</m-ui-select>-->
            <!--</div>-->
        </div>
    </form>
    <div class="modal-footer">
        <button type="button" class="btn btn-primary" ng-click="createClick()">确定</button>
        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="cancelClick()">取消</button>
    </div>
</div>
